JavaScript

 

Attention les codes qui suivent sont valable pour JavaScript et pas forcement pour des Applets.

 

OIntroduction

Oles variables - déclaration des variables

Ofontes et couleurs d'affichage:

dessins

on ne peut pas dessiner avec JavaScript

Les objets :

Oles String - chaîne de caractères

ODate -(année, mois, jours, heures, minutes et secondes)

OMath (mathématique)

OFormulaire

O text - (zone texte dans un formulaire)
O textarea - (zone texte multiligne)
O Bouton de commande - (Button)
O Case à cocher - (checkbox) oui ou non
O Radio - bouton radio oui ou non
O Select- choix d'un parmis plusieurs qui ?
O Password - (Zone texte à entrées cachées - mot de passe)
O Reset - (remise à la valeur initial)
O Submit envoi des données

ODocument

ONavigator

Owindow - fenêtre

O alerte
O confirm
O prompt

dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Introduction

Le script est une suite d'instructions incluses dans le document HTML.

Il n'a pas besoin de compilateur et il est directement interprété par le navigateur (pour des versions pas trop vieille).

Le script comprend au moins 1 fonction ( placée dans le HEAD) et reconnue par les marqueurs

<SCRIPT Language="JavaScript">

.......

</SCRIPT>.

L'appel d'une fonction se fait de la même façon avec les paramètres à passer entre parenthèses.

exemple :

<HTML><HEAD>

<SCRIPT Langage="JavaScript">

function essais (var_chaine) // fonction essais attend une variable de type chaîne de caractère

{

instruction 1;

...

}

</SCRIPT>

</HEAD><BODY>

....

<SCRIPT Langage="JavaScript">

essais ("ça devrait marcher") // appel la fonction essais et passe le contenu des parenthèses

</SCRIPT>

...

</BODY>


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application

Les variables :

Les différents type de variables sont vues dans le document principal ( J'veux les voir).

Dans les scripts, les variables doivent être définie par le mot clé var. Elles sont soit booléennes, soit entières (base 10: nnn) (base 8: 0nnn)(base 16: 0Xnnn), soit réelles soit de type chaîne. Ces dernières peuvent contenir des marqueurs HTML. Plusieurs variables peuvent être placées dans un tableau

exemples

var exemple1= 10 // variable entière

var exemple2= 2,149 // variable réelle

var exemple3= 3 E-7 // variable réelle

var texte1= "ceci est <FONT SIZE=4>placé dans </FONT>une variable de type chaîne"

var teste1= true // variable booléenne - en minuscule

var tableau1 [0]= 13 // variable tableau - la première valeur =13


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


String: Les objets String (pas égal à une variable chaîne de caractères) servent à manipuler les chaînes de caractères.

déclaration :

chaine1 = "nom_chaîne" cet objet n'a pas besoin du constructeur new

- méthodes

nom_chaîne.big () // idem <BIG>

nom_chaîne.small () // idem <SMALL>

nom_chaîne.blink () // idem <BLINK>

nom_chaîne.bold () // idem <B>

nom_chaîne.italics () // idem <I>

nom_chaîne.strike() // idem <STRIKE> barré

nom_chaîne.fixed () // idem <TT> - police non proportionnelle

nom_chaîne.sub() // idem <SUB> indice

nom_chaîne.sup() // idem <SUP> exposant

nom_chaîne.fontcolor (nnnnnn) ou nom_chaîne.fontcolor ("crimson")

nom_chaîne.fontsize ()

nom_chaîne.charAt (n) // renvoie le caractère de la position n

nom_chaîne.indexOf (i) // première position d'une sous chaîne

nom_chaîne.lastIndexOf (j) // dernière position d'une sous chaîne

nom_chaîne.substring(i,j) // Extrait une sous-chaîne

nom_chaîne.anchor () // désigne un signet

nom_chaîne.link(URL) // lien hypertexte

nom_chaîne.toLowerCase() // convertit en minuscules

nom_chaîne.toUpperCase() // convertit en majuscules

 

instructions JavaScript:

exécution du script

<Script Language ="JavaScript">

essai1= "ceci est ";

document.write(essai1.blink());

essai2= "un essai ";

document.write(essai2.bold());

essai3= "d'un renvoi ";

document.write(essai3.italics());

essai4= "&agrave; une URL : ";

essai5= "retour &agrave; JavaSript ";

essai6="javaS.htm";

document.write(essai4.fontcolor(BB6600));

document.write(essai5.link(essai6));

</Script>


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Les fontes

Pour choisir une fonte particulière, il faut utiliser les marqueurs HTML

instructions JavaScript:

exécution du script

document.write("ceci s'affiche sur une ligne <P>")

document.write("et cela sur la ligne suivante")

 


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Les objets


Date: Les objets "date" permettent d'utiliser les variables de temps (seconde, minute, heure, jour, mois, année).

Pour définir un objet date, il existe quatre constructeurs différents:

date1 = new Date () // composé de toutes les variables ( seconde, minute, heure, jour, mois, année)

date2 = new Date ("mois, jour, année, heure:minutes:secondes") // variables sous forme de chaîne

date3 = new Date (mois, jour, année) // variables sous forme d'entier

date4 = new Date (mois, jour, année, heures, minutes, secondes) // variables sous forme d'entier

 

- méthodes:

nomdate.getDate () // jour du mois (entre 1 et 31)

nomdate.getDay () // =jour

nomdate.getHours () // =heure

nomdate.getMinutes () // =minutes

nomdate.getSeconds ()// =secondes

nomdate.getMonth () // =mois

nomdate.getYear () // =année

nomdate.setDate ()

nomdate.setDay ()

nomdate.setHours()

nomdate.setMinutes ()

nomdate.setSeconds ()

nomdate.setMonth ()

nomdate.setTime ()

nomdate.setYear ()

nomdate.getTime () // =nombre de ms depuis 1.1.1970 0h

nomdate.parse (autredate) // =nombre de ms depuis 1.1.1970 0h et autredate

nomdate.toGMTSting() // converti une date en chaîne selon GMT

nomdate.toLocalSting() // converti une date en chaîne selon GMT local

nomdate.UTC (a,m,j[,h[,m[,s]]]) // conversion en temps réel

nomdate.getTimeZoneoffset () // décalage en mn par rapport à GMT

instructions JavaScript:

exécution du script

<SCRIPT LANGUAGE = "JavaScript">

function affichedate()

{

aujoudhui = new Date ();

an= aujourdhui.getYear();

document.write ("ann&eacute;e "+an+"<P>");

document.write ("jour="+aujoudhui.getDay()+"<P>");

document.write ( aujoudhui.getHours()+":"+ aujoudhui.getMinutes());

}

</SCRIPT>

remarque: depuis l'an 2000 et le bug de l'année codée sur 2 chiffres, la valeur de l'année est 100 pour 2000, 101 pour 2001, 102 pour 2002. Si vous employez Netscape, l'année sera codée sur 3 chiffres ( 101, 102, etc.) Avec Exploreur la conversion est automatique et l'affichage devient 2001, 2002, etc. Comme vous ne savez pas quel est le navigateur utilisé par votre visiteur, il faut le lire son nom ( navigator.appName) et ajouter 1900 s'il na s'agit pas de MIE.


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Math: Les objets "math" contient 8 propriétés (constantes) et 17 méthodes

Pour utiliser une des constantes , utilisez la syntaxe suivante :

Math. propriété

Pour utiliser une des méthodes , utilisez la syntaxe suivante :

Math. méthode ()

instructions pour les constantes JavaScript:

exécution du script

<SCRIPT LANGUAGE = "JavaScript">

with (Math)

{

document.write( "E = ",E)

document.write( "<P>LN10 = ",LN10)

document.write( "<P>LN2 = ",LN2)

document.write( "<P>LOG2E = ",LOG2E)

document.write( "<P>LOG10E= ",LOG10E)

document.write( "<P>PI = ",PI)

document.write( "<P>SQRT1_2 = ",SQRT1_2)

document.write( "<P>SQRT2 = ",SQRT2)

}

<FORM>

calcul de la valeur aboslue:

<input Type="button" value="abs" ONCLICK="form.repon1.value=

Math.abs (form.repon.value)"><P>

calcul de l'arcosinus:

<input Type="button" value="acos" ONCLICK="form.repon1.value=

Math.acos (form.repon.value)"><P>

calcul de l'arcsinus:

<input Type="button" value="asin" ONCLICK="form.repon1.value=

Math.asin (form.repon.value)"><P>

calcul de l'arctangente:

<input Type="button" value="atan" ONCLICK="form.repon1.value=

Math.atan (form.repon.value)"><P>

calcul du cosinus:

<input Type="button" value="cos" ONCLICK="form.repon1.value=

Math.cos (form.repon.value)"><P>

calcul du sinus:

<input Type="button" value="sin" ONCLICK="form.repon1.value=

Math.sin (form.repon.value)"><P>

valeur :<input Type="text" value="repon" size = 15"> <P>

réponse:<input Type="text" value="repon1" size = 15"> <P>

calcul de la tangente:

<input Type="button" value="tan" ONCLICK="form.repon1.value=

Math.tan (form.repon.value)"><P>

calcul de l'entier < =:

<input Type="button" value="ceil" ONCLICK="form.repon1.value=

Math.ceil (form.repon.value)"><P>

calcul de l'entier inf <=

<input Type="button" value="floor" ONCLICK="form.repon1.value=

Math.floor (form.repon.value)"><P>

calcul de l'exponentielle

<input Type="button" value="exp" ONCLICK="form.repon1.value=

Math.exp (form.repon.value)"><P>

calcul du log. (naturel ou népérien)

<input Type="button" value="log" ONCLICK="form.repon1.value=

Math.log (form.repon.value)"><P>

affiche le plus grand

<input Type="button" value="max" ONCLICK="form.repon1.value=

Math.max (form.repon.value, 107)"><P>

affiche le plus petit

<input Type="button" value="min" ONCLICK="form.repon1.value=

Math.min (form.repon.value, 107)"><P>

mise à la puissance

<input Type="button" value="pow" ONCLICK="form.repon1.value=

Math.pow (form.repon.value, 107)"><P>

nombre aléatoire

<input Type="button" value="ranfom" ONCLICK="form.repon1.value=

Math.random ()"><P>

calcul l'arrondi

<input Type="button" value="round" ONCLICK="form.repon1.value=

Math.round (form.repon.value)"><P>

calcul la racine carrée

<input Type="button" value="sqrt" ONCLICK="form.repon1.value=

Math.sqrt (form.repon.value)"><P>

exemple :4ème racine

<input Type="button" value="4eme" ONCLICK="form.repon1.value=

Math.pow (Math.E, (Math.log(form.repon.value))/4)"><P>

évidemment ...

calcul de la valeur aboslue:

.

calcul de l'arcosinus:

.

calcul de l'arcsinus:

.

calcul de l'arctangente:

.

calcul du cosinus:

.

calcul du sinus:

.

variable :

.

résultat:

.

calcul de la tangente:

.

calcul de l'entier < =:

.

calcul de l'entier inf <=

.

calcul de l'exponentielle

.

calcul du log. (naturel ou népérien)

.

affiche le plus grand

.

affiche le plus petit

.

mise à la puissance

.

nombre aléatoire

.

calcul l'arrondi

.

calcul la racine carrée

.

exemple :4ème racine

évidemment ...


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


formulaire: Les objets "formulaire" servent à afficher des zones de contrôles ( zones textes, boutons radio, cases à cocher , etc..)

- syntaxe : <FORM name="nom_formulaire" TAGET="dans_cette_fenêtre" ACTION = prog_a_executer METHOD = (GET ou POST) ENCTYPE = "type_d'encodage" onSubmit ="nom_de_la_fonction">

- propriétés:

nom_formulaire.ACTION // correspond au paramétre ACTION

nom_formulaire.encoding // correspond au paramétre ENCTYPE

nom_formulaire.method // tcorrespond au paramétre METHODE

nom_formulaire.taget // correspond au paramétre TARGET

nom_formulaire.elements[] // tait référence aux contrôles du forulaire

nom_formulaire.length // tnombre de contrôles dans le formulaire

nom_formulaire.index // numéro du formulaire à atteindre

 

instructions JavaScript:

exécution du script

<FORM NAME = "testform">

<input type="text" name="bout4" size=30><BR><P>

<input type="button" name="24" value="clic 1" ONCLICK = "fform1(testform)"> <BR><P>

</FORM>

/*et le script suivant :*/

function fform1(form)

{ form.bout4.value = "il y a "+document.testform.lenght+ "controles"}

 




dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


TEXT: Les objets text permettent de définir des zones de texte dans les formulaires.

- syntaxe :

<INPUT type ="text" Name = "nom_text" value="text_par_défaut" [Size = nombre_de_ligne_visible]

[onBlur = "traitement"] appel d'une fonction "traitement" lors de la perte du focus par l'objet select

[onChange ="traitement2"] appel d'une fonction "traitement2" lors d'un chagement de valeur de l'objet select

[onfocus = "traitement3"] appel d'une fonction "traitement3" lors de la prise du focus par l'objet select

[onSelect = "traitement4"] appel d'une fonction "traitement34 lors de la sélection du texte

 

Les termes entre paranthèses crochets sont facultatifs

- propriétés de l'objet text :

nom_text.name// pour connaître le nom de l'objet

ou NomFormulaire.elements[N].name // repéré ici par sa position (-1) dans le formulaire

nom_text.value//contenu de l'objet

nom_text.defaultValue// = paramètre value de l'objet

 

instructions JavaScript:

exécution du script

<FORM NAME=essaitext>

j'aime JavaScript <P>

<INPUT TYPE="text" Name="javatext" VALUE="oui" SIZE=30

onFocus="this.select()" onChange="this.value=this.value.toUpperCase()"

onBlur="voirt(this.form)">

</FORM>

<P><Script Language ="JavaScript">

function voirt(form)

{

document.essaitext.javatext.value="ce test fonctionne, "+document.essaitext.javatext.value;

}

</script>

j'aime JavaScript


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


TEXTAREA: Les objets textarea permettent de définir des zones de texte multiligne dans les formulaires.

- syntaxe :

<TEXTAREA name = "nom_texta" ROWS="nlignes" COLS="ncolonnes"

[onBlur = "traitement"] appel d'une fonction "traitement" lors de la perte du focus par l'objet select

[onChange ="traitement2"] appel d'une fonction "traitement2" lors d'un chagement de valeur de l'objet select

[onfocus = "traitement3"] appel d'une fonction "traitement3" lors de la prise du focus par l'objet select

[onSelect = "traitement4"] appel d'une fonction "traitement34 lors de la sélection du texte

text par défaut affiché dans l'objet

</TEXTAREA>

Les termes entre paranthèses crochets sont facultatifs

- propriétés de l'objet text :

nom_texta.name// pour connaître le nom de l'objet

ou NomFormulaire.elements[N].name // repéré ici par sa position (-1) dans le formulaire

nom_texta.value//contenu de l'objet

 


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Button: Les objet boutons sont identiques à ceux placés dans les formulaires HTML (ne sont pas inscrit entre les marqueur des Script.

- syntaxe : <input type="button" name="nom" value="valeur_initiale" [ONCLICK = "nom_de_la_fonction"]>

- propriétés:

document.NomFormulaire.Nomboutons.name // pour connaître le nom du bouton

document.NomFormulaire.elements[N].name // repéré ici par sa position (-1) dans le formulaire

document.NomFormulaire.Nomboutons.value // pour connaître son contenu

document.NomFormulaire.elements[].value

instructions JavaScript:

exécution du script

<FORM NAME = "plus_un")

<input type="text" name="bout1" size=10>

<input type="button" name="calcul" value="execute" ONCLICK = "add1(this.form)">

</FORM>

/*et le script suivant :*/

function add1(form)

{ form.bout1.value = form.bout1.value +1}

instructions JavaScript:

exécution du script

<FORM NAME = "bout2")

<input type="text" name="bout2" size=10>

<input type="button" name="calcul" value="execute" ONCLICK = "add2(this.form)">

</FORM>

/*et le script suivant :*/

function add2(form)

{

form.bout2.value ++

}


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application



checkbox: Les objet "case à cocher sont identiques à ceux placés dans les formulaires HTML (ne sont pas inscrit entre les marqueur des Script).

- syntaxe : <input type="checkbox" name="nom" value="valeur_initiale" [CHECKED] [ONCLICK = "nom_de_la_fonction"]>

Checked (n'est pas obligatoire) coche la case par défaut

- propriétés:

document.NomFormulaire.Nombouton.checked // true si coché

document.NomFormulaire.Nombouton.defaultchecked // rtrue si coché par défaut

document.NomFormulaire.Nombouton.name // pour connaître son nom

document.NomFormulaire.Nombouton.value // pour connaître sa valeur

document.NomFormulaire.elements[N].checked // repéré ici par sa position (-1) dans le formulaire

 

instructions JavaScript:

exécution du script

<FORM NAME = "check")

<input type="text" name="bout3" size=10>

<input type="checkbox" name="doubl" value="10" ONCLICK = "fonction1(this.form)">

<input type="checkbox" name="textl" value="c'est juste" ONCLICK = "fonction2(this.form)">

<input type="checkbox" name="checkl" value="125" ONCLICK = "fonction3(this.form)">

</FORM>

/*et le script suivant :*/

function fonction1(form)

{ form.bout3.value = document.check.doubl.value *2}

function fonction2(form)

{ form.bout3.value = document.check.text.value }

function fonction3(form)

{ form.bout3.value = " coucou..."






dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Select: Les objets select permettent de faire un ou plusieurs choix parmis une liste déroulante.

- syntaxe :

<SELECT Name = nom_select [Size = nombre_de_ligne_visible] [MULTIPLE]>

multiple autorise plusieurs sélections

[onBlur = "traitement"] appel d'une fonction "traitement" lors de la perte du focus par l'objet select

[onChange ="traitement2"] appel d'une fonction "traitement2" lors d'un chagement de valeur de l'objet select

[onfocus = "traitement3"] appel d'une fonction "traitement3" lors de la prise du focus par l'objet select

<option value="valeur_retournée" [selected]> text1 valeur_retournée -> valeur renvoyée lors de la sélection de text1

<option value="valeur_retournée2" [selected]> text2 selected -> selectionne déjà un choix

</SELECT>

Les termes entre paranthèses crochets sont facultatifs

- propriétés de l'objet select :

nom_select.name // pour connaître le nom du bouton

ou NomFormulaire.elements[N].name // repéré ici par sa position (-1) dans le formulaire

nom_select.lenght // pour connaître le nombre d'option de l'objet

nom_select.options // tableau contenant les options de l'objet

nom_select.selectedIndex // numéro de l'option sélectionnée (de la première si sélection multiple)

- propriétés des options:

valeur_retournée.options[i].name // pour connaître le nom du bouton

ou NomFormulaire.elements[i].options[i].name

valeur_retournée.options[i].index // renvoie le numéro de l'option sélectionnée

valeur_retournée.options[i].lenght // renvoie le nombre d'options

valeur_retournée.options[i].defaultSelected //sélectionne par défaut

valeur_retournée.options[i].selected // sélectionne une option

valeur_retournée.options[i].selectedIndex // numéro de l'option sélectionnée

valeur_retournée.options[i].text // renvoie la valeur du text affiché dans le marqueur <option>

valeur_retournée.options[i].value // renvoie la valeur du paramètreVALUE

 

instructions JavaScript:

exécution du script

<FORM name="formchoix">

<Textarea name="rep" ROWS =4 COLS = 30></TExtarea><p>

<input type="button" name="ok" onclick=voirchoix(this.form)>

<select name="choix" size=3>

<option > oui

<option value="nein" selected>non

<option value="da"> ja

<option value="blut"> boof

</select>

</FORM>

<Script Language ="JavaScript">

function voirchoix (form)

{

var nmbr=document.formchoix.choix.length

var i=document.formchoix.choix.selectedIndex

var val =document.formchoix.choix.options[i].value

var nomop=document.formchoix.choix.options[i].text

document.formchoix.rep.value="il y a "+ nmbr + " choix possibles \n vous avez choisi l'option "+ i + "\n vous avez choisi l'option de valeur: "+ val + "\n vous avez choisi l'option : "+ nomop;

}

</script>


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Password: L'objet "Password" est un champ text dans lequel sa valeur est remplacée par des astérisques.

syntaxe : <INPUT TYPE ="password" NAME="nom_champ" VALUE="Valeur_initiale" >

 

- propriétés:

 

nom_champ.défaultValue // =Value initiale

nom_champ.name // renvoie son nom

nom_champ.value // renvoie la valeur contenue dans le champ

ou

Nom_formulaire.elements[i].Propriété

 

- Méthodes:

 

nom_champ.blur () // enlève le focus de l'objet ("dessélectionne")

nom_champ.focus () // donne le focus

nom_champ.select () // selectionne le contenu du champ

ou

Nom_formulaire.elements[i].Propriété.Méthode ()

 

exemples d'instructions pour les propriétés et méthodes

exécution du script

<FORM>

<INPUT TYPE ="button" NAME="champ1" VALUE="OK" onClick = "voir_juste (this.form)" >

<INPUT TYPE ="password" NAME="champ2" VALUE="TELEM" SIZE=10 >

<INPUT TYPE ="text" NAME="champ3" VALUE="reponse" SIZE=15 >

</FORM>

<SCRIPT LANGUAGE = "JavaScript">

function voir_juste(form)

{

var reponse

if (form.champ2.value=="POIRE")>

reponse="c'est juste";

else

{

reponse = form.champ2. value;

form.champ2.focus();

form.champ2.select();

}

form.champ3.value= reponse;

}


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


radio: Les objet boutons sont identiques à ceux placés dans les formulaires HTML (ne sont pas inscrit entre les marqueur des Script.

- syntaxe : <input type="radio" name="nom" value="valeur_initiale" [CHECKED] [ONCLICK = "nom_de_la_fonction"]> Les termes entre paranthèses crochets sont facultatifs

- propriétés:

document.NomFormulaire.Nomboutons[i].name // pour connaître le nom du bouton num. i du groupe

ou document.NomFormulaire.elements[N].name // repéré ici par sa position (-1) dans le formulaire

document.NomFormulaire.Nomboutons[i].value // pour connaître son contenu

document.NomFormulaire.Nomboutons[i].checked // renvoie l'état du bouton

document.NomFormulaire.Nomboutons[i].defaultChecked // renvoie l'état du bouton par défaut

document.NomFormulaire.Nomboutons[i].length // renvoie le nombre de bouton radio

instructions JavaScript:

exécution du script

<FORM NAME = "radi">

<input type="text" name="butt" value = "Nous sommes le 32 juin" size=30><P>

<input type="radio" name="test" value="radi1" CHECKED ONCLICK = "voir(this.form)"> oui<P>

<input type="radio" name="test" value="radi2" ONCLICK = "voir(this.form)">non<P>

</FORM>

<SCRIPT LANGUAGE = "JavaScript">

function voir (form)

{

varidate = new Date ()

if (document.radi1.test[0].checked)

form.butt.value="pas du tout !!";

else

form.butt.value="oui, nous sommes le " + varidate.getDay() +"."+ varidate.getMonth();

}

</script>

oui

non

note : si les boutons ont des noms identiques l'utilisateur ne peut sélectionner qu'une seule option à la fois, par contre, si les nom sont différents, cela autorise les sélections multiples.


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Reset: Les objets Reset permettent de réafecter les valeurs par défaut des différents contrôles ( boutons).

- syntaxe : <input type="reset" name="nom" value="valeur_initiale" [ONCLICK = "nom_de_la_fonction"]> Les termes entre paranthèses crochets sont facultatifs

- propriétés:

nom.name // pour connaître le nom du bouton

ou NomFormulaire.elements[N].name // repéré ici par sa position (-1) dans le formulaire

nom.value // pour connaître sa valeur

ou NomFormulaire.elements[N].value // repéré ici par sa position (-1) dans le formulaire

instructions JavaScript:

exécution du script

<FORM NAME = "rese">

<input type="text" name="butt" value = "Modifiez les valeurs initiales" size=30 ><P>

<input type="radio" name="test" value="radi1" CHECKED > oui<P>

<input type="radio" name="test" value="radi2" >non<P>

<input type="radio" name="valeurs initiales" value="reset1" ><P>

</FORM>

 

oui

non


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Submit: Les objets submit servent à envoyer des données contenues dans des objets d'un formulaire.

déclaration :

< input type="submit" name="nom_sub" value="texte_affiché" [onClick="traitement"]>

- propriétés :

nom_sub.name // nom du bouton

ou nom_formulaire.elements[i].name

nom_sub.value // valeur du bouton

note: le formulaire doit contenir l'instriction ACTION="mailto_ou_prog_de_traitement:adresse"

ainsi que METHOD=POST

 


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


Document: Les objets "document" permettent d'utiliser les propriétés du document courant

Pour accéder à un objet document, il faut utiliser l'une des deux méthodes suivantes :

document. propriété // propriété = alinkColor, anchirs, bgColor,cookies, fgColor, forms, lastModified, linkColor, links, location, referrer, title, vlink

document.méthode(paramètre) // méthode =clear, close, open, write, writeln

instructions JavaScript:

exécution du script

 

<FORM>

<input Type="bouton" value="fond vert" ONCLIK="changefond(this.form)"> <input Type="bouton" value="fond jaune" ONCLIK="changefond(this.form)">

<SCRIPT LANGUAGE = "JavaScript">

function changefond()

{

if (form.fondvert==true)

document.bgColor="#00FF00";

else

document.bgColor="#FFFF00";

}

 

 



 


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application

Navigator: L'objet "navigateur" renvoie des informations sur le type et la version du navigateur utilisé. Ce qui permet des affichages , des codes ou des liens différents selon le navigateur installé sur une machine.

instructions pour les propriété

exécution du script

<SCRIPT LANGUAGE = "JavaScript">

document.write( navigator.appCodeName,"<P>");

document.write( navigator.appName,"<P>");

document.write( navigator.appVersion,"<P>");

document.write( navigator.userAgent,"<P>");

</SCRIPT>


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


window: Les objets window sont au niveau le plus haut.

mode d'accès aux propriétés:

window.Propriété // fenêtre courante

self.Propriété // fenêtre courante

top.Propriété // fenêtre hiérachiquement supérieur (si plusieurs sont ouvertes)

parent.Propriété // document dans lequel les cadres (FRAMES) sont définis

variable.Propriété // nom d'une variable utilisée pour définir une nouvelle fenêtre

 

- propriétés de l'objet window :

.defaultStatus// message affiché par défaut dans la bare d'état

.frames[]// tableau des cadres définis dans le document

.length/nombre de cadres dans la fenêtre parent

.name// nom de la fenêtre défini par open ("","nom_fenêtre","")

.parent// nom du document dans lequel les cadres sont définis

.self// nom de la fenêtre courante

.status// message affiché dans la bare d'état

.top// nom de la fenêtre hiérarchiquemet supérieur si plusieurs sont ouverte

.window// nom de la fenêtre courante

- méthodes de l'objet window :

alert()// boîte de dialogue (texte+OK) - voir alert

confirme()//boîte de dialogue (texte+OK+ ANNULER)- voir confirme

prompt()// boîte de dialogue (texte à entrer +OK+ ANNULER) - voir prompt

alert()// boîte de dialogue (texte+OK) - voir boîte de dialogue

setTimeout()//Exécution d'une fonction après un délais défini

clearTimeout()//annule le délais

 

instructions JavaScript:

exécution du script

<form>

<input type="button" name="alerte" value="ouvrir" onClick="ouvre()">

</form>

<script Language= javaScript>

 

function ouvre()

{

nouvel=window.open("sons/testsubmit","testsubmit","status=yes, toolbar=yes, location=yes, directories=yes, menubar=no, scrollbars=no, resizable=yes, width=40, height=40");

}

</script> script dans la document testsumbit :

</HEAD><BODY onLoad="compte()">

<Script language="JavaScript">

function compte()

{

fin="";

clearTimeout(fin);

window.status="dans moins de 5s je me ferme.";

fin =setTimeout("window.close()",5000);

}

</script>

</BODY></HTML>


ou titre.gif (1036 octets)

 

ALERT : La méthode alert affiche une boîte de dialogue contenant un text et un bouton "OK"

<form>

<input type="button" name="alerte" value="voir s'il a y le feu" onClick="alert(''Y a pas le feu')">

</form>

confirm: La méthode confirm affiche une boîte de dialogue contenant un text, un bouton "OK" et un bouton "Annuler"

instructions JavaScript:

exécution du script

<form>

<input type="button" name="alerte" value="femer cette fenêtre" onClick="sur()">

</form>

<script Language= javaScript>

function sur()

{

if (confirm('merci de confirmer avant de patir'))

window.close()

}

</script>


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application


prompt: La méthode prompt affiche une boîte de dialogue contenant un champ text, un bouton "OK" et un bouton "Annuler"

instructions JavaScript:

exécution du script

<form name="pt">

<input type="button" name="val" value="démo" onClick="prom(this .form)" ><P>

<input type="text" name="val3" value="controle" size=30>

</form>

<script Language= javaScript>

function prom(form)

{

retourprompt=prompt("entrez la valeur 3",4);

if (retourprompt==null)

document.pt.val3.value= "il ne faut pas cliquer sur Annuler";

else

{

if (retourprompt==3)

document.pt.val3.value="c'est juste";

else

document.pt.val3.value= "que neni";

}

}

</script>


dsdem.gif (1080 octets) ou titre.gif (1036 octets) document ou voir Javaou voir Java Application